import { NavBar, NoticeBar, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  
  const handleBack = () => {
    nav(-1) // 返回上一个页面
  }

  const handleConsultDoctor = () => {
    nav('/ji') // 跳转到极速问诊
  }

  const handleContactService = () => {
    // 联系客服逻辑
  nav('/chat')
  }

  return (
    <div style={{background:'#fff',minHeight:'100vh'}}>
      {/* 顶部导航 */}
      <NavBar onBack={handleBack}>复诊开方</NavBar>
      
      {/* 公告栏 */}
      <NoticeBar 
        content='公告: 1、自治区卫生热线0951-12320 银川市政府热线0951-12345 妙手互联网医院热线'
        color='alert'
        style={{margin:'12px'}}
      />

      {/* 主要内容区域 */}
      <div style={{
        display:'flex',
        flexDirection:'column',
        alignItems:'center',
        padding:'40px 20px',
        textAlign:'center'
      }}>
        {/* 空状态插图 */}
        <div style={{
          width:'120px',
          height:'120px',
          marginBottom:'20px',
          display:'flex',
          alignItems:'center',
          justifyContent:'center',
          fontSize:'60px'
        }}>
          📋
        </div>
        
        {/* 暂无记录提示 */}
        <div style={{
          fontSize:'18px',
          color:'#333',
          marginBottom:'20px',
          fontWeight:500
        }}>
          暂无用药记录
        </div>

        {/* 服务说明 */}
        <div style={{
          fontSize:'14px',
          color:'#666',
          lineHeight:'1.6',
          marginBottom:'40px',
          padding:'0 10px'
        }}>
          复诊开方只面向在平台有医生开具用药记录的患者！您可以先根据当前病情状况找到对应擅长的医生，订购其图文咨询服务，在问诊中医生将根据您的病情描述需要开具用药建议！后续若还有用药需求，就可以直接进入开药门诊申请复诊开方！
        </div>

        {/* 操作按钮区域 */}
        <div style={{width:'100%',maxWidth:'300px'}}>
          {/* 知道怎么找医生 */}
          <div style={{marginBottom:'20px'}}>
            <div style={{
              fontSize:'12px',
              color:'#999',
              marginBottom:'8px',
              textAlign:'left'
            }}>
              知道怎么找医生
            </div>
            <Button 
              block 
              color='primary'
              style={{
                background:'#1fc89a',
                border:'none',
                height:'48px',
                fontSize:'16px',
                fontWeight:500
              }}
              onClick={handleConsultDoctor}
            >
              立即问医生
            </Button>
          </div>

          {/* 不知道怎么找医生 */}
          <div>
            <div style={{
              fontSize:'12px',
              color:'#999',
              marginBottom:'8px',
              textAlign:'left'
            }}>
              不知道怎么找医生
            </div>
            <Button 
              block 
              style={{
                background:'#f0f9ff',
                color:'#1677ff',
                border:'1px solid #1677ff',
                height:'48px',
                fontSize:'16px',
                fontWeight:500
              }}
              onClick={handleContactService}
            >
              联系妙手客服
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
